extends layout

block content
	title= "Message"
	script(src="/javascripts/index.js")
	script(src="/javascripts/jquery.mousewheel.js")
	script(src="/javascripts/jquery.jscrollpane.min.js")
	script(src="/javascripts/announcement.js") // announcement functions
	script(src="/javascripts/comment.js") // comment functions
	script(src="/javascripts/jquery_notification_v.1.js") // Notifications functions
	script(src="/javascripts/timeTogo.js") // Time To Go
	
	form(method="POST", name="frmForm")
		
		div(style="display:none")
			input(type="text", name="formName", id="formName", value="")
			input(type="text", name="requestID", id="requestID", value="")
			input(type="text", name="content", id="content", value="")
			input(type="submit", id="cmdSubmit", value="Submit")
		
		// Side bar contain ticker and show online
		div(style="position:fixed;width:250px;height:800px;z-index:0;top:30px;right:0px", class="righNav", id="rNav")
			table(cellpadding=2, width="100%", style="margin-top:20px;background-color:#fff")
				tr
					td(valign="top")
						div(id="divQuickNav",style="height:250px;width:100%;overflow:auto;background-color:#f2f4f8;")				
				tr
					td
						div(id="divOnline", style="width:240px;height:200px;overflow:auto;background-color:#f2f4f8;")
			
		div(id="droppable",title="",style="width:950px;height:100%;")
			table(width="100%")
				tr
					td(valign="top",width="200px", style="border-right: 1px Solid #ccc")
						table(width="100%")
							tr
								td(align="center")
									img(src="/images/1.jpg", class="", style="vertical-align: middle;") 
									h4( style="display: inline;") &nbsp;&nbsp;&nbsp;&nbsp;Stephen Curry
							tr
								td(style="")
									div(style="margin-top:10px;")
										img(src="/images/database form.png", class="", style="vertical-align: middle;") 
										h4( style="display: inline")&nbsp; FORMS
										hr
										div(style="width:100%;height:auto;white-space:nowrap;", id="divTables")
							tr
								td(style="")
									div(style="margin-top:10px;")
										img(src="/images/report.png", class="", style="vertical-align: middle;") 
										h4( style="display: inline")&nbsp; REPORTS
										hr
										div(style="width:100%;height:auto", id="divReports")
										
											
					td(valign="top")
						div(id="", style="margin:10px;width:100%;")
							h4 Home / Message
							h2 Message
							div(class="hr")
						div(class="msgTop")
							pan(class="pull-left")
								button(class="button-icon")
									icon(class="icon-inbox")
									label(class="margin-left_5") Inbox (2)
								&nbsp;&nbsp;
								button(class="button-icon")
									icon(class="icon-envelope")
									label(class="margin-left_5") Send Message
							pan(class="pull-right")
								button(class="button-icon")
									icon(class="icon-trash")
									label(class="margin-left_5") Delete Message
								&nbsp;&nbsp;
								button(class="button-icon")
									icon(class="icon-trash")
									label(class="margin-left_5") Delete Conversation
								&nbsp;&nbsp;
								button(class="button-icon")
									icon(class="icon-remove")
									label(class="margin-left_5") Cancel Delete
						div(class="msgBottom")
							div(class="msgInbox")
								li
									div(class="divF")
										img(src="images/avatar/avatar.png", width="30", height="30")
									div(class="divC")
										label(class="lblName") Samuel G. Pulta
										br
										label(class="lblContent") Lorem Ipsum is simply dummy text ...
										br
										label(class="lblTime")
											icon(class="icon-time")  
											label   December 24, at 22:13  
									div(class="divL")
										input(type="checkbox",class="chckbx")
								
							div(class="msgNote display")
								label
									label No Conversation Selected
									br
									label Select message from the left
									br
									label side to view your conversation
							div(class="msgContent")
								div
									label Message From Samuel Pulta
									icon(class="icon-remove pull-right cursor hideMessage")
								div
									div
										li
											div(class="divF")
												img(src="images/avatar/avatar.png", width="30", height="30")
											div(class="divC")
												label(class="lblName") Samuel G. Pulta
												br
												label(class="lblContent") Lorem Ipsum is simply dummy text of the printipsum. Lorem Ipsum is simply dummy text of the printipsum. Lorem Ipsum is simply dummy text of the printipsum.
												br
												label(class="lblTime")
													icon(class="icon-time")  
													label   December 24, at 22:13  
											div(class="divL")
												input(type="checkbox",class="chckbx")
										
									div
										textarea(class="input-medium inputTxtArea")
						
				
		
		